<template>
	<view class="chat-detail" :style="{'--height':`${chatWindowHeight}rpx`,'--duration':`.${keybordDuration}s`}">
		<common-navbar :title="sessionInfo?sessionInfo.sessionName:'聊天详情'" />
		<view class="chat-detail-main">
			<scroll-view class="chat-window" scroll-y scroll-anchoring
				:scroll-into-view="`messageItem${scrollCurrentId}`">
				<view v-for="(item,index) in messageList" :key="item.id" :id="`messageItem${item.id}`"
					class="messageitem">
					<messageItem :messageInfo="item" :isShowDate="isShowDate(item, messageList[index - 1])"
						ref="messageItem" @keyboardheightchange="keyboardheightchange" />
				</view>
				<vipModule ref="vipModule" />
			</scroll-view>
			<messageEmitter @keyboardheightchange="keyboardheightchange" @submitTextMessage="sendMessage($event,true)"
				:isInputDisabled="isInputDisabled" />
		</view>
		<vipPromote ref="vipPromote" />
	</view>
</template>

<script>
	let scrollBottomTimer;
	import messageEmitter from "./components/message-emitter/messageEmitter.vue";
	import messageItem from "./components/message-item/messageItem.vue";
	import vipPromote from "./components/vip-promote/vipPromote.vue";
	import vipModule from "./components/vip-module/vipModule.vue";

	export default {
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				keyboardHeight: 0,
				keybordDuration: 0,
				msgType: 'text',
				sessionInfo: null,
				messageList: [],
				scrollCurrentId: '',
				isInputDisabled: false,
			}
		},
		async onLoad(option) {
			this.sessionInfo = JSON.parse(decodeURIComponent(decodeURIComponent(option.sessionInfo)));
			this.sendMessage(this.sessionInfo.quick_reply, false);
			setTimeout(() => {
				const msgId = this.sendMessage('正在输入中....', false);
				setTimeout(() => {
					const currentMsg = this.messageList.find(item => item.id == msgId);
					this.$set(currentMsg, 'data', this.sessionInfo.quick_reply_second)
					console.log('currentMsg>>>>>>>>>>>', currentMsg)
				}, 2000)
			}, 1000)
			uni.onKeyboardHeightChange(res => {
				console.log(res.height)
				this.keyboardHeight = res.height;
				this.scrollBottom();
			})
		},
		components: {
			messageEmitter,
			messageItem,
			vipPromote,
			vipModule
		},
		computed: {
			chatWindowHeight() {
				//当前选中的消息类型为文本类型或者音频类型时
				if (this.msgType == 'text' || this.msgType == 'voice') {
					//如果软键盘高度大于0也就是软键盘开启状态下
					if (this.keyboardHeight > 0) {
						//uniapp设计尺寸750*(状态栏高度+navbar高度+软键盘高度-底部安全区高度）/手机宽度像素
						// return 750 * (this.$systemInfo.statusBarHeight + 44 + this.keyboardHeight - this.$systemInfo
						// 	.safeAreaInsets
						// 	.bottom) / this.$systemInfo.screenWidth;
						return 750 * (this.$systemInfo.statusBarHeight + 44 + this.keyboardHeight) / this.$systemInfo
							.screenWidth;
					} else {
						//软键盘关闭状态下不减去底部安全区高度
						return 750 * (this.$systemInfo.statusBarHeight + 44 + this.keyboardHeight) / this.$systemInfo
							.screenWidth;
					}
				} else {
					//当前打开了表情菜单获取其他消息类型菜单，不计算软键盘的高度
					return (750 * (this.$systemInfo.statusBarHeight + 44) / this.$systemInfo
						.screenWidth) + this.messageMenuHeight;
				}
			},
			messageMenuHeight() {
				if (this.msgType == 'text' || this.msgType == 'voice') {
					return 0
				} else if (this.msgType == 'emoji') {
					return 300
				} else if (this.msgType == 'other') {
					return 228
				}
			},
		},
		methods: {
			scrollToByElementId(id) {
				clearTimeout(scrollBottomTimer)
				scrollBottomTimer = setTimeout(() => {
					this.scrollCurrentId = id;
				}, 200)
			},
			scrollBottom() {
				if (this.messageList.length == 0) {
					return
				}
				clearTimeout(scrollBottomTimer)
				this.scrollCurrentId = '';
				scrollBottomTimer = setTimeout(() => {
					this.$nextTick(() => {
						this.scrollCurrentId = this.messageList[this.messageList.length - 1].id;
					})
				}, 400)
			},
			isShowDate(currentMessageItem, prevMessageItem) {
				if (!prevMessageItem) {
					return true;
				} else if (currentMessageItem.time - prevMessageItem.time >= 300000) {
					return true;
				} else {
					return false;
				}
			},
			sendMessage(textValue, isSender, isShowLink) {
				if (isSender && textValue.length < 20) {
					return this.$showToast('请输入不小于20个字的问题描述')
				}
				const id = uni.WebIM.conn.getUniqueId();
				if (isSender && !this.userInfo) {
					return uni.showModal({
						title: '提示',
						content: '本次操作需要您进行登录验证',
						success: (res) => {
							if (res.confirm) {
								vm.$u.route('/pages_login/login_entry/loginEntry');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				let avatar = isSender ? this.userInfo.avatars : require('@/pages_chat/assets/image/chat/cs-avatar.png')
				const msg = {
					id,
					data: textValue,
					isSender: isSender,
					time: +new Date(),
					avatar,
					isShowLink,
				}
				this.messageList.push(msg)
				if (isSender) {
					this.$u.post(this.$restUrl.submitConsultContent, {
						question: msg.data,
						hid: this.sessionInfo.id,
					}).then(res => {
					this.$refs.vipModule.show = true;
					this.$refs.vipPromote.show = true;
					this.isInputDisabled = true;
					this.sendMessage(this.sessionInfo.quick_reply_third, false, true)
					})
				}
				this.scrollBottom();
				return id
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./staticChat.scss";
</style>
